<script setup>
import CheckBox from "../components/CheckBox.vue";
import MenuList from "../components/MenuList.vue";
import MenuItem from "../components/MenuItem.vue";
import { reactive, ref } from "vue";
const title = "hahaha";
function aaa(a,b,c){
  console.log(a,b,c)
}
const navList = reactive([{
  id:0,
  title:"首页"
},{
  id:1,
  title:"关于我们"
},{
  id:2,
  title:"新闻介绍"
},{
  id:3,
  title:"加入我们"
}])

// 导航默认选中的项
const num = ref(0);
// 点击某个导航项时的方法，切换选中项的索引
function menuChange(i){
  num.value = i
}
</script>

<template>
  <main>
    <CheckBox title="全选" :checked="true" id="001" @change="aaa"></CheckBox>
    <br>
    {{ title }}
    <br>
    <MenuList :active="num">
      <MenuItem
        v-for="(val,idx) in navList"
        :title="val.title"
        :key="val.id"
        :index="idx"
        @click="menuChange(idx)"
      >
    </MenuItem>
    </MenuList>
  </main>
</template>
